<template>
<!-- 此组件用于表现搜索结果 -->
    <div>
        <div 
            class="search-item"
            v-for="item in itemData"
            :key="item.bookId"
            @click="gotoBookDetail(item.bookName)">
            <div class="photo">
                <img src="@/assets/images/index/logo-no-color.png" alt="">
            </div>
            <div class="book-info">
                <div class="title">{{item.bookName}}</div>
                <div class="author">{{item.authorName}}</div>
                <div class="serise">
                    <div v-if='item.serialStatus == 1'>已完结</div>
                    <div v-if='item.serialStatus == 0'>更新至：<span>{{item.updteChapterName}}</span></div>
                </div>
                <div class="script">简介：<span>{{item.description}}</span></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'searchItem',
    props:{
        itemData:Array
    },
    methods: {
        gotoBookDetail(str) {
            this.$router.push({name:'bookDetail',query:{bookName:str}});
        }
    }
}
</script>



<style lang="scss" scoped>

.search-item {
    padding: 14px 8px;
    border-bottom: 1px solid #ccc;
    display: flex;
    font-size: 13px;
    // background-color: #f2f2f2;
    color: #888;
    .photo {
        
        img {
            width: 74px;
            height: 98px;
            background-color: #ccc;
            margin-right: 10px;
        }
    }
    .book-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
            font-size: 16px;
            color: black;
            .r {
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                color: #AAAAAA;
                background-color: #F1F1F1;
                border-radius: 3px;
            }
            .r1 {
                color:white;background-color: #ED5565;
            }
            .r2 {
                color:white;background-color: #E28D29;  
            }
            .r3 {
                color:white;background-color: #9FC575;
            }
        }
        i {
            color: #FF5555;
        }
        .serise {
            span {
                color: black;
            }
        }
        .script {
            display: -webkit-box; /*对象作为伸缩盒子模型展示*/
            -webkit-box-orient: vertical; /*设置或检索伸缩盒子对象的子元素的排列方式*/
            -webkit-line-clamp: 1; /*显示的行数*/
            overflow: hidden; /*隐藏超出的*/
            span {
                color: black;
            }
        }
    }
}
</style>
